<script>
import request from "../../../utils/request"
import documentIcon from "./assets/document.png"
import { handleMoney, showModal, showToast } from "../../../utils"
import store from "../../../store"
import { userActionType } from "../../../store/modules/user"
import vipIcon from "./assets/vip.png"
import pay from "../../../utils/pay"
import coupon from "@/components/coupon/index.vue"
export default {
  name: "information",
  components: { coupon },
  methods: {
    handleMoney,
    pay() {
      //获取支付所需要的参数
      request({
        url: "information/buyInformation",
        data: {
          id: this.queryParams.id,
          userCouponId: this.userCouponId,
        },
        errorHandle: true,
        showLoading: true,
      }).then(async (data) => {
        uni.showLoading({
          title: "支付中",
          mask: true,
        })
        //发起支付
        pay
          .handlePay(data)
          .then(async () => {
            await showModal({
              title: "恭喜",
              content: "支付成功",
              showCancel: false,
            })
            uni.navigateBack()
          })
          .catch((err) => {
            showToast.error(err)
          })
          .finally(() => {
            uni.hideLoading()
          })
      })
    },
  },
  data() {
    return {
      detail: null,
      documentIcon,
      vipIcon,
      userInfo: null,
      queryParams: {
        id: "",
      },
      noCoupon: false, //是否没有优惠券
      userCouponId: "", //优惠券id（用于提交订单的时候传参过去）
      couponDiscount: 0, //使用了优惠券之后的减免金额
      sum: 0, //使用了所有的优惠后的总价
    }
  },
  async onLoad(query) {
    this.queryParams.id = query.id
  },
  async onShow() {
    this.userInfo = await store.dispatch(userActionType.action.userInfo)
    request({
      url: "information/getInformationDetail",
      data: {
        id: this.queryParams.id,
      },
      errorHandle: true,
      showLoading: true,
    }).then((data) => {
      this.detail = data
      this.sum = this.detail.price
      //开启了会员折扣计算折扣后的价格
      if (this.detail.vipDeduction !== 1) {
        this.sum = this.detail.price * this.detail.vipDeduction
      }
    })
  },
}
</script>

<template>
  <view class="page" v-if="detail">
    <view class="info block">
      <image class="icon" :src="documentIcon"></image>
      <view class="right">
        <view class="title">{{ detail.title }}</view>
        <view class="information-class"> 分类：{{ detail.informationTypeName }} </view>
        <view class="price">￥{{ handleMoney(detail.price) }}</view>
      </view>
    </view>
    <!--		会员折扣-->
    <view class="vip-discount block" v-if="detail.vipDeduction !== 1">
      <view class="title">
        <image class="icon" :src="vipIcon"></image>
        <!--				未开通会员-->
        <text v-if="!userInfo.memberInfo">开通会员，享</text>
        <!--				已开通会员-->
        <text v-else>您已成为会员，本单可享</text>
        <text style="color: #e56820">折扣价</text>
      </view>
      <view class="price-open-vip">
        <!--				会员折扣价-->
        <view class="price">
          <view class="discount-price">￥{{ handleMoney(sum) }}</view>
          <view class="origin-price">￥{{ handleMoney(detail.price) }}</view>
        </view>
        <!--				开通会员按钮-->
        <view class="open-vip-btn" v-if="!userInfo.memberInfo" @click="$uni.navigateTo({ url: '/pages/mine/vipList' })"> 开通会员 </view>
      </view>
    </view>
    <!--		优惠券（仅无会员折扣价时可用）-->
    <view
      v-else-if="!noCoupon"
      style="margin-top: 20rpx; border-radius: 30rpx; box-shadow: 0 0 10rpx 0 rgba(0, 0, 0, 0.1); background: white"
    >
      <coupon
        :coupon-type-list="[0, 2]"
        :origin-price="detail.price"
        :no-coupon.sync="noCoupon"
        :user-coupon-id.sync="userCouponId"
        :coupon-discount.sync="couponDiscount"
        @change="() => (sum = detail.price - couponDiscount)"
      ></coupon>
    </view>
    <!--		购买须知-->
    <view class="tips">购买须知：您当前支付内容为虚拟服务，不支持退换、 转让、退订。</view>
    <view class="placeholder"></view>
    <view class="footer">
      <view class="left">
        <view class="text">合计：</view>
        <view class="unit">￥</view>
        <view class="number">{{ handleMoney(sum) }} </view>
      </view>
      <view class="pay-btn" @click="pay">立即支付</view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.page {
  min-height: 100vh;
  background: var(--gray-background-color);
  padding: 30rpx;

  > .block {
    padding: 30rpx;
    border-radius: 30rpx;
    background: white;
    box-shadow: 0 0 10rpx 0 rgba(0, 0, 0, 0.1);
  }

  > .info {
    display: flex;

    > .icon {
      width: 120rpx;
      height: 120rpx;
      border-radius: 10rpx;
    }

    > .right {
      flex: 1;
      margin-left: 30rpx;
      width: 0;

      > .title {
        font-size: 38rpx;
        font-weight: 500;
      }

      > .information-class {
        margin-top: 20rpx;
        font-size: 30rpx;
        color: var(--text-color-light);
      }

      > .price {
        margin-top: 20rpx;
        font-size: 36rpx;
        text-align: right;
      }
    }
  }

  > .vip-discount {
    margin-top: 30rpx;

    > .title {
      font-size: 34rpx;
      display: flex;
      align-items: center;

      > .icon {
        width: 40rpx;
        height: 40rpx;
        margin-right: 10rpx;
      }
    }

    > .price-open-vip {
      display: flex;
      justify-content: space-between;
      margin-top: 30rpx;

      > .price {
        display: flex;
        align-items: flex-end;

        > .discount-price {
          color: #e56820;
          font-size: 34rpx;
          font-weight: 500;
        }

        > .origin-price {
          margin-left: 20rpx;
          color: var(--text-color-light);
          font-size: 30rpx;
          text-decoration: line-through;
        }
      }

      > .open-vip-btn {
        width: 180rpx;
        height: 60rpx;
        line-height: 60rpx;
        text-align: center;
        border-radius: 30rpx;
        background: linear-gradient(270deg, #cfad6a 0%, #f5e1ae 100%);
        color: var(--text-color);
        font-size: 30rpx;
      }
    }
  }

  > .tips {
    margin-top: 30rpx;
    color: var(--text-color-light);
    font-size: 30rpx;
  }

  > .footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: {
      top: 30rpx;
      left: 30rpx;
      right: 30rpx;
      bottom: calc(env(safe-area-inset-bottom) + 30rpx);
    }
    background: white;
    display: flex;
    align-items: center;
    justify-content: space-between;

    > .left {
      display: flex;
      align-items: flex-end;

      .text {
        font-size: 30rpx;
        color: var(--text-color-light);
      }

      .unit {
        font-size: 30rpx;
        color: #e56820;
      }

      .number {
        font-size: 40rpx;
        color: #e56820;
      }
    }

    > .pay-btn {
      width: 200rpx;
      height: 80rpx;
      line-height: 80rpx;
      text-align: center;
      border-radius: 40rpx;
      background: #e56820;
      color: white;
      font-size: 30rpx;
    }
  }

  > .placeholder {
    height: calc(110rpx + env(safe-area-inset-bottom));
  }
}
</style>
